<template>
    <div>
        <h1>父组件</h1>
        <p>{{ money }}</p>
        <hr />
        <!-- 1. 父组件通过自定义属性提供数据 -->
        <Son :money="money" @change='handlerChange' />
        <hr>
        <Son />
    </div>
</template>

<script>
import { ref } from 'vue'

import Son from './Son.vue'

export default {
    components: {
        Son
    },

    setup () {
        const money = ref(100)

        const handlerChange = (data) => {
            alert(data)
            money.value -= data
        }

        return {
            money,
            handlerChange
        }
    }

}
</script>